<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>#{title}</title>
        <link rel="stylesheet" type="text/css" href="/food_store/css/templateStyle.css" />
    </h:head>
    <!-- A template used by the other jsf-pages. Contains five parts.
        1) Banner (Header) - A simple text
        2) Login - login.xhtml
        3) Cart - Contains data from the shoppingCart and buttons to navigate to
            shoppinCart.xhtml and buy.xhtml
        4) Content - This area is filled by the regular pages.
        5) Footer - A simple image -->
    <h:body>
        <!-- Banner -->
        <div id="divBanner">
            <h:link value="Chalmers Food Store" outcome="goToStart" />
        </div>
        <!-- Cart -->
        <div id="divCart">
            <h:form id="cartInfo">
                <h:outputText value="Number of items: #{shoppingCartModelBean.size} " />
                <h:outputText value="Total cost: #{shoppingCartModelBean.totalPrice} " />
                <p:button value="Show Cart " outcome="viewCart" />
                &nbsp;
                <p:button value="Check Out" outcome="checkOut" />
            </h:form>
        </div>
        <!-- Login -->
        <div id="divLogin">
            <ui:include src="login.xhtml" />
        </div>
        <!-- Content -->
        <div id="divContent">
            <ui:insert name="content" />
        </div>
        <br/>
        <!-- Footer -->
        <div>
            <img src="/food_store/images/banner_footer.jpg" alt="banner" />
        </div>
    </h:body>
</html>
